<template>
    <div>
        <div class="navbar-div">
            <van-nav-bar title="商品分类" left-arrow @click-left="onClickLeft" />
        </div>
        <div>
            <van-row>
                <van-col span="6">
                    <div id="left-nav">
                        <ul>
                            <li 
                                @click="clickCategory(index, item.ID)" 
                                :class="{'category-active': categoryIndex === index}"
                                v-for="(item, index) in category" :key="index">
                                {{item.MALL_CATEGORY_NAME}}
                            </li>
                        </ul>
                    </div>
                </van-col>
                <van-col span="18">
                    <div class="tabCategory-sub">
                        <van-tabs :ellipsis="false" v-model="active" @click="onClicksubCategory">
                            <van-tab :title="item.MALL_SUB_NAME" v-for="(item, index) in curSubCate" :key="index">
                            </van-tab>
                        </van-tabs>
                    </div>

                    <div id="list-div">
                        <van-pull-refresh loading-text="正在重新刷新..." v-model="isRefresh" @refresh="onRefresh">
                            <van-list loading-text="正在加载更多..." finished-text="没有更多了" v-model="loading" :finished="finished" @load="onLoad">
                                <div class="list-item" @click="goGoodsInfo(item.ID)" v-for="(item, index) in goodsList" :key="index">
                                    <div class="list-item-img">
                                        <img :src="item.IMAGE1" width="100%" :onerror="errorImg">
                                    </div>
                                    <div class="list-item-text">
                                        <div>{{item.NAME | stringFilter(12)}}</div>
                                        <div class="goods-price"><span>¥</span>{{item.PRESENT_PRICE | moneyFilter}}</div>
                                    </div>
                                </div>
                            </van-list>
                        </van-pull-refresh>
                    </div>
                </van-col>
            </van-row>
        </div>
    </div>
</template>

<script>
import URL from '@/ServiceAPI.config.js';
import { Toast } from 'vant';
import storage from '@/utils/storage.js';
    export default {
        data() {
            return {
                category: [], // 大类类别
                categoryIndex: 0, // 当前高亮大类索引
                subCategory: [], // 所有小类类别总和
                curSubCate: [], // 当前小类类别
                curSubCateId: '', // 当前小类中被选中的ID
                active: 0, // 激活当前小类所在标签
                loading: false, // 上拉数据是否正在加载
                finished: false, // 是否还有数据可以执行上拉加载
                page: 1, // 商品列表的页数
                goodsList: [], // 商品列表信息
                isRefresh: false, // 下拉刷新
                errorImg: 'this.src="' + require('@/assets/images/no_photo.jpg') + '"', // 图片未加载
            }
        },
        created() {
            console.log("created");
            let {index, categoryId} = this.$route.params;
            let category = storage.get("category");
            let subCategory = storage.get("subCategory")
            if (index && categoryId) {
                // console.log(index, categoryId);
                this.categoryIndex = index;
                this.setCateAndSubCate(category, subCategory, index)
            } else {
                this.setCateAndSubCate(category, subCategory);
            }
        },
        mounted() {
            console.log("mounted");
            let winHeight = document.documentElement.clientHeight || document.body.clientHeight;
            document.getElementById("left-nav").style.height = winHeight - 46 - 50 + 'px';
            document.getElementById("list-div").style.height = winHeight - 90 - 50 + 'px';
        },
        methods: {
            setCateAndSubCate(category, subCategory, curCategoryIndex = 0) {
                // 此时已存储完毕分类，可以给当前页面的 category 和 subCategory 赋值了
                this.category = category;
                this.subCategory = subCategory;
                console.log(curCategoryIndex);
                this.getsubCategoryByCategoryID(this.category[curCategoryIndex].ID);
            },
            onClickLeft() {
                this.$router.go(-1);
            },
            clickCategory(index, categoryId) {
                console.log("clickCategory");
                this.categoryIndex = index;
                this.curSubCate = this.subCategory.filter(sub => sub.MALL_CATEGORY_ID == categoryId)
                // console.log(this.curSubCate);
                this.curSubCateId = this.curSubCate[0].ID;
                this.page = 1;
                this.finished = false;
                this.goodsList = [];
                this.getsubCategoryByCategoryID(categoryId);
            },
            // 根据大类ID读取小类类别列表
            getsubCategoryByCategoryID(categoryId) {
                console.log("getsubCategoryByCategoryID");
                // 属于当前大类的小类们
                this.curSubCate = this.subCategory.filter(sub => sub.MALL_CATEGORY_ID == categoryId)
                this.active = 0;
                this.curSubCateId = this.curSubCate[0].ID;
                this.onRefresh();
            },
            // 上拉加载方法【会被默认触发】
            onLoad() {
                console.log("onLoad");
                // 当有子分类且不是下拉刷新状态时才触发上拉加载
                if (this.subCategory.length > 0 && this.isRefresh != true) {
                    // this.isRefresh = false;
                    console.log("onLoad开始上拉加载");
                    this.curSubCateId = this.curSubCateId || this.subCategory[0].ID;
                    this.getGoodsList();
                }
            },
            // 下拉刷新【不会默认触发】
            onRefresh() {
                console.log("onRefresh");
                this.isRefresh = true;
                this.finished = false;
                this.loading = false;
                this.goodsList = [];
                this.page = 1;
                this.getGoodsList();
            },
            // 获取商品列表数据
            getGoodsList() {
                console.log("getGoodsList");
                console.log(this.page, this.curSubCateId);
                this.$ajax({
                    url: URL.getGoodsListByCategorySubID,
                    method: 'POST',
                    data: {
                        curSubCateId: this.curSubCateId,
                        page: this.page,
                    }
                }).then(res => {
                    if (res.data.code === 200 && res.data.data.length > 0) {
                        console.log(res.data.data);
                        this.page++;
                        this.goodsList = this.goodsList.concat(res.data.data);
                        this.finished = false;
                    } else {
                        console.log(res.data.data);
                        // 没有数据了的时候
                        this.finished = true;
                    }
                    this.isRefresh = false;
                    this.loading = false;
                }).catch(err => {
                    console.log(err);
                    this.isRefresh = false;
                    this.loading = false;
                    this.finished = false;
                });
            },
            // 点击小类tab触发
            onClicksubCategory(index, title) {
                console.log("onClicksubCategory");
                this.curSubCateId = this.curSubCate[index].ID;
                // console.log("curSubCateId" + this.curSubCateId);
                this.onRefresh();
            },
            // 跳转到商品详情页
            goGoodsInfo(id) {
                this.$router.push({name: 'Goods', params: {goodsId:id}})
            }
        },
        watch: {
            // '$route.params': {
            //     handler(val) {
            //         console.log(val);
            //         this.clickCategory(val.index, val.categoryId)
            //     },
            //     deep: true
            // }
        }
    }
</script>

<style scoped lang="scss">
#left-nav {
    background: aliceblue;

    ul li {
        line-height: 2rem;
        border-bottom: 1px solid #e1e1e1;
        padding: 3px;
        font-size: .8rem;
        text-align: center;
    }
}

#list-div {
    overflow: scroll;

    .list-item {
        display: flex;
        font-size: 0.8rem;
        padding: 5px;
        text-align: center;
        font-size: 14px;
        border-bottom: 1px solid #f0f0f0;
        background-color: #fff;

        .list-item-img {
            min-height: 4.35rem;
            line-height: 4.3rem;
            flex: 1;

            img {
                vertical-align: middle;
            }
        }
        .list-item-text {
            text-align: left;
            flex: 2;
            margin: 10px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .goods-price {
                color: #ff3a4f;
                // 给价格¥加3像素的右边距
                span {
                    margin-right: 3px;
                }
            }
        }
    }
}

// 反白效果
.category-active {
    background-color: #fff;
    color: #ff3a4f;
}
</style>